<template>
<div class="rs-split" @mouseup="onMouseUp" @mousemove="onMouseMove" >
    <div class="rs-split-first" :style="firstStyle">
        <slot name="first"></slot>
    </div>
    <div class="rs-split-size" :class="sizeClass" :style="sizeStyle" @mousedown="onMouseDown"></div>
    <div class="rs-split-last" :style="lastStyle">
        <slot name="last"></slot>
    </div>
    <div class="rs-split--mask" v-if="active" :style="cursor"></div>
</div>
</template>
<script>
import {addResizeListener,removeResizeListener} from 'element-ui/lib/utils/resize-event.js';
import dom from '@/utils/dom.js'
export default {
    name:'RsSplit',
    props:{
        type:{
            validator(value) {
                return ['vertical', 'horizontal'].indexOf(value) >= 0
            },
            required: true
        },
        minSize:{
            type:Number,
            default:100
        },
        size:{
            type:Number,
            default:0
        },
        fixed:{
            type:Boolean,
            default:false
        },
        splitColor:{
            type:String,
            default:'#e6e6e6'
        },
        splitSize:{
            type:Number,
            default:4
        }
    },
    data(){
        return {
            firstSize:0,
            width:0,
            height:0,
            active:false,
            hasMoved:false,
            oldPosition:0,
            first:{
                width:0,
                height:0
            },
            last:{
                width:0,
                height:0
            },
            firstStyle:{},
            lastStyle:{},
            sizeClass:'',
            sizeStyle:{},
            cursor:{}
        }
    },
    created(){
        this.firstSize = this.minSize;
        if( this.type === 'vertical'){
            this.sizeClass = ['vertical'];
            this.cursor.cursor = 'col-resize';
        }else{
            this.sizeClass = ['horizontal'];
            this.cursor.cursor = 'row-resize';
        }
        if( this.fixed ){
            this.sizeStyle.cursor = 'default';
            this.cursor.cursor = 'default';
        }
    },
    mounted(){        
        addResizeListener(this.$el,()=>{            
            this.resize();
        })
        this.layout();
    },
    destroyed(){
        removeResizeListener(this.$el);
    },
    methods:{
        layout(){
            if( this.width == 0 || this.height == 0 )
                return;
            //console.log('layout')
            const {firstStyle,lastStyle,sizeStyle,sizeClass} = this;
            firstStyle.left = 0;
            firstStyle.top = 0;
            lastStyle.right = 0;
            lastStyle.bottom = 0;

            if( this.type === 'vertical'){

                this.first.width = this.firstSize;
                this.first.height= this.height;

                firstStyle.bottom = 0;
                firstStyle.width = this.firstSize + 'px';

                this.last.width = this.width - (this.firstSize + this.splitSize);
                this.last.height= this.height;

                lastStyle.left = (this.firstSize + this.splitSize)+ 'px';
                lastStyle.top = 0;

                sizeStyle.top = 0;
                sizeStyle.left = this.firstSize + 'px';
                sizeStyle.bottom = 0;
                sizeStyle.width= this.splitSize + 'px';
            }else{
                this.first.width = this.width;
                this.first.height= this.firstSize;

                firstStyle.right = 0;
                firstStyle.height = this.firstSize + 'px';

                this.last.width = this.width;
                this.last.height= this.height - (this.firstSize + this.splitSize);

                lastStyle.top = (this.firstSize + this.splitSize)+ 'px';
                lastStyle.left = 0;

                sizeStyle.left = 0;
                sizeStyle.top = this.firstSize + 'px';
                sizeStyle.right = 0;
                sizeStyle.height= this.splitSize + 'px';
            }
            
            this.$nextTick(()=>{
                this.$emit('resize',{first:this.first,last:this.last});
            })
            this.$forceUpdate();
        },
        resize(){
            //console.log('resize');
            const rect = dom.getBoundingClientRect(this.$el);
            this.width = rect.width;
            this.height = rect.height;
            this.layout();
        },
        onMouseDown(e){

            if(this.fixed)
                return;
            this.active = true
            this.hasMoved = false
            if( this.type === 'vertical'){
                this.oldPosition = e.clientX;
            }else{
                this.oldPosition = e.clientY;
            }
            //console.log(e)
        },
        onMouseUp(){
            if(this.fixed)
                return;
            this.active = false
        },
        onMouseMove(e){
            if(this.fixed)
                return;
            if (e.buttons === 0 || e.which === 0) {
                this.active = false
            }
            if( this.active ){
                //console.log(e)
                let lx = 0;
                if( this.type === 'vertical'){

                    lx += (e.clientX - this.oldPosition);
                    this.oldPosition = e.clientX;
                }else{
                    lx += (e.clientY - this.oldPosition);
                    this.oldPosition = e.clientY;
                }
                //console.log(lx)
                this.firstSize += lx;
                if( this.firstSize < this.minSize ){
                    this.firstSize = this.minSize;
                }
                this.layout();
            }
        }
    }
}
</script>